<template>
	<view class="page-dir">
		<scroll-view scroll-y="true" class="scroll-height">
			<ly-tree
				:ready="ready" 
				:props="props" 
				node-key="id" 
				:tree-data="treeData" 
				:show-radio="true" 
				@check="handleCheckChange">
			</ly-tree>
		</scroll-view>
		
		<view class="button-groups">
			<button type="primary" @click="onSure">确定</button>
			<button type="primary" @click="onCancel">取消</button>
		</view>
	</view>
</template>

<script>
	import { getDocDirTreeDataAll, saveDocDirFile } from '@/api/base/file.js'
	import { notice, utilities } from '@/utils/common.js'
	
	export default {
		props: {
			file: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				treeData: [],
				ready: false,
				props: {
					label: 'name'
				},
				fileDier: ''
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				getDocDirTreeDataAll().then(res => {
					res.data.forEach(data => {
						data.name = data.dirName
						data.parentId = data.parentDir
					})
					this.treeData = utilities.transformToTreeFormat(res.data)
					this.ready = true
				})
			},
			handleCheckChange(obj) {
				this.fileDir = obj.checkedKeys[0]
			},
			onSure() {
				if(!this.fileDir) {
					notice.toast("请选择文件夹目录")
					return
				}
				this.$emit('confirm', this.fileDir)
			},
			onCancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-dir {
		background-color: #fff;
		height: calc(100vh - 280px);
		padding: 12px;
	}
	
	.scroll-height {
		height: calc(100% - 45px);
	}
	
	/deep/ .ly-tree-node__label {
		font-size: 14px;
	}
	
	.button-groups {
		position: fixed;
		bottom: 8px;
		width: calc(100% - 24px);
		display: flex;
	
		uni-button {
			flex: 1;
			background-color: #1E91E6;
			margin: 0 4px;
			font-size: 16px;
			color: #FFFFFF;
		}
	}
</style>